<template>
<div class="aiChat">
    <div class="chatPageTitle">
        <img :src="logo2" class="logo2" />
    </div>
    <div class="chatList" id="chatList" ref="chatListRef">        
        <div v-for="item in msgList">
            
            <UserMsgItem :msg="item.msg" v-if="item.type == MsgType.USER"/>
            <AiMsgItem  :msg="item.msg" :loading="item.type == MsgType.AI_LOADING?true:false"  v-if="item.type == MsgType.AI ||  item.type == MsgType.AI_LOADING "/>
         </div>
        
    </div>
    <InputMsgToAi @send="handleSend"/>
</div>
</template>
<script lang="ts" setup>
enum MsgType{
    USER,
    AI,
    AI_LOADING
}
interface IMsg {
    type:MsgType,
    msg:string
}

import { nextTick, ref } from 'vue';
import AiMsgItem from './components/aiMsgItem.vue';
import InputMsgToAi from './components/inputMsgToAi.vue';
import UserMsgItem from './components/userMsgItem.vue';
import iconDeepBlue from '@/assets/icons/icon_deepseek_blue.png'
import request from '@/api/request';
import logo2 from '@/assets/images/logo2.png'

const chatListRef = ref();
const msgList = ref<IMsg[]>([]);

const handleSend = (msg:string)=>{
    
    msgList.value?.push({
        msg,
        type:MsgType.USER
    })

    msgList.value?.push({
        msg:'',
        type:MsgType.AI_LOADING
    })

    //页面滚动到底部
    
    var height = chatListRef.value.scrollHeight;   

    if(height){
        nextTick(()=>{
            chatListRef.value.scrollTop = height+100;        
        })
    }

     

    //加入loading
    request.post('/query_ai/send',{
        msg
    }).then((resp)=>{

        msgList.value.pop();

        msgList.value =  msgList.value;

        var data = resp.data;
         msgList.value?.push({
            msg:data+'',
            type:MsgType.AI
        })
    });


}

</script>
<style lang="less" scoped>
.aiChat{
    padding-top: 66px;
    padding-bottom: 50px;

    .chatList{
        height: 100vh;
        overflow-y: auto;
    }

    .chatPageTitle{
        font-size: 20px;
        background: #fff;
        position: fixed;
        top: 0;
        width: 100%;
        text-align: center;
        padding:10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .titleIcon{
            img{
                width:30px;
                margin-right: 4px;
            }
        }

        .logo2{
            
        }
    }

    
}
</style>
<style>
@media (min-width: 1024px){
    .chatPageTitle , .inputMsgToAi{
        width: 670px !important;     
    }
    
}
</style>
<style>
.el-drawer__header{
    border-bottom: 1px solid #dfdfdf;
}
</style>